<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形</title>
    <style>
        *{margin:0; padding:0;}
        .box{
            position:relative;
            width:600px;
            height:230px;
            margin:100px auto;
        }
        .box div{
            position:absolute;
            top:0;
            left:270px;
            width:70px;
            height:220px;
            opacity:0;
            color:#fff;
            transform-origin: center bottom;
            transition: all 1s;
        }
        .box:hover div{
            opacity:1;

        }
        .box div:nth-of-type(1){background-color:red;opacity:1;}
        .box div:nth-of-type(2){background-color:#E9967A;}
        .box div:nth-of-type(3){background-color:#FA8072;}
        .box div:nth-of-type(4){background-color:#FFA07A;}
        .box div:nth-of-type(5){background-color:#FFA500;}
        .box div:nth-of-type(6){background-color:#FF8C00;}
        .box div:nth-of-type(7){background-color:#FF7F50;}
        .box div:nth-of-type(8){background-color:#F08080;}
        .box div:nth-of-type(9){background-color:#FF6347;}
        .box div:nth-of-type(10){background-color:#FF4500;}
        .box div:nth-of-type(11){background-color:#FF0000;}
        .box div:nth-of-type(12){background-color:#FF69B4;}
        .box div:nth-of-type(13){background-color:#FF1493;}
        .box div:nth-of-type(14){background-color:#FFC0CB;}
        .box div:nth-of-type(15){background-color:#FFB6C1;}
        .box div:nth-of-type(16){background-color:#DB7093;}
        .box div:nth-of-type(17){background-color:#B03060;}
        .box div:nth-of-type(18){background-color:#C71585;}
        .box div:nth-of-type(19){background-color:#D02090;}
        .box div:nth-of-type(20){background-color:#FF00FF;}
        .box div:nth-of-type(21){background-color:#EE82EE;}
        .box div:nth-of-type(22){background-color:#DDA0DD;}
        .box div:nth-of-type(23){background-color:#DA70D6;}
        .box div:nth-of-type(24){background-color:#BA55D3;}
        .box div:nth-of-type(25){background-color:#9932CC;}

        .box:hover div:nth-of-type(1){
            transform: rotate(0deg);
        }
        .box:hover div:nth-of-type(2){
            transform: rotate(15deg)
        }
        .box:hover div:nth-of-type(3){
            transform: rotate(30deg)
        }
        .box:hover div:nth-of-type(4){
            transform: rotate(45deg)
        }
        .box:hover div:nth-of-type(5){
            transform: rotate(60deg)
        }
        .box:hover div:nth-of-type(6){
            transform: rotate(75deg)
        }
        .box:hover div:nth-of-type(7){
            transform: rotate(90deg)
        }
        .box:hover div:nth-of-type(8){
            transform: rotate(105deg)
        }
        .box:hover div:nth-of-type(9){
            transform: rotate(120deg)
        }
        .box:hover div:nth-of-type(10){
            transform: rotate(135deg)
        }
        .box:hover div:nth-of-type(11){
            transform: rotate(150deg)
        }
        .box:hover div:nth-of-type(12){
            transform: rotate(165deg)
        }
        .box:hover div:nth-of-type(13){
            transform: rotate(180deg)
        }
        .box:hover div:nth-of-type(14){
            transform: rotate(195deg)
        }
        .box:hover div:nth-of-type(15){
            transform: rotate(210deg)
        }
        .box:hover div:nth-of-type(16){
            transform: rotate(225deg)
        }
        .box:hover div:nth-of-type(17){
            transform: rotate(240deg)
        }
        .box:hover div:nth-of-type(18){
            transform: rotate(255deg)
        }
        .box:hover div:nth-of-type(19){
            transform: rotate(270deg)
        }
        .box:hover div:nth-of-type(20){
             transform: rotate(285deg)
        }
        .box:hover div:nth-of-type(21){
            transform: rotate(300deg)
        }
        .box:hover div:nth-of-type(22){
            transform: rotate(315deg)
        }
        .box:hover div:nth-of-type(23){
            transform: rotate(330deg)
        }
        .box:hover div:nth-of-type(24){
            transform: rotate(345deg)
        }
        .box:hover div:nth-of-type(25){
            transform: rotate(360deg)
        }
    </style>
</head>
<body>
<div class="box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>21</div>
    <div>22</div>
    <div>23</div>
    <div>24</div>
    <div>25</div>
</div>
</body>
</html>